<template>
  <view class="ecg-container">
    <view class="ecg-header">
      <text class="ecg-title">{{ currentModeText }}</text>
    </view>
    
    <view class="ecg-canvas-container">
      <canvas 
        canvas-id="ecgCanvas" 
        class="ecg-canvas"
        :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
      ></canvas>
    </view>
    
    <view class="ecg-controls">
      <button 
        class="control-btn" 
        @tap="startScrollMode"
        :disabled="isScrolling"
      >开始自动滑动</button>
      
      <button 
        class="control-btn" 
        @tap="startRefreshMode"
        :disabled="isRefreshing"
      >开始实时绘制</button>
      
      <button 
        class="control-btn stop-btn" 
        @tap="stopAll"
      >停止</button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EcgChart',
  data() {
    return {
      canvasWidth: 350,
      canvasHeight: 200,
      maxDataPoints: 100,
      displayPoints: 50,
      dataList: [],
      refreshList: [],
      displayData: [],
      scrollIndex: 0,
      showIndex: 0,
      isScrolling: false,
      isRefreshing: false,
      scrollTimer: null,
      refreshTimer: null,
      ctx: null
    }
  },
  computed: {
    currentModeText() {
      if (this.isScrolling) return '自动滑动展示模式'
      if (this.isRefreshing) return '实时绘制刷新模式'
      return '静态心电图'
    }
  },
  mounted() {
    this.initData()
    this.initCanvas()
  },
  beforeDestroy() {
    this.stopAll()
  },
  methods: {
    initData() {
      // 生成模拟心电图数据
      for (let i = 0; i < this.maxDataPoints; i++) {
        const value = Math.sin(i * 0.1) * 50 + Math.sin(i * 0.3) * 20 + (Math.random() - 0.5) * 10
        this.dataList.push(value)
        this.refreshList.push(value)
      }
      
      // 初始化显示数据
      this.displayData = new Array(this.displayPoints).fill(0)
    },
    
    initCanvas() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#ecgCanvas').boundingClientRect(data => {
        if (data) {
          this.canvasWidth = data.width
          this.canvasHeight = data.height
        }
      }).exec()
      
      this.ctx = uni.createCanvasContext('ecgCanvas', this)
      this.drawECG()
    },
    
    startScrollMode() {
      this.stopAll()
      this.isScrolling = true
      this.scrollIndex = 0
      
      this.scrollTimer = setInterval(() => {
        if (this.scrollIndex < this.dataList.length) {
          this.scrollIndex++
        } else {
          this.scrollIndex = 0
        }
        this.drawECG()
      }, 50)
    },
    
    startRefreshMode() {
      this.stopAll()
      this.isRefreshing = true
      this.refreshList = []
      this.showIndex = 0
      
      // 添加初始数据
      for (let i = 0; i < 10; i++) {
        const value = Math.sin(i * 0.1) * 50 + Math.sin(i * 0.3) * 20 + (Math.random() - 0.5) * 10
        this.refreshList.push(value)
      }
      
      this.refreshTimer = setInterval(() => {
        // 模拟实时数据添加
        const newValue = Math.sin(this.refreshList.length * 0.1) * 50 + 
                        Math.sin(this.refreshList.length * 0.3) * 20 + 
                        (Math.random() - 0.5) * 10
        this.refreshList.push(newValue)
        
        // 更新显示数据
        this.updateDisplayData()
        this.drawECG()
      }, 200)
    },
    
    stopAll() {
      if (this.scrollTimer) {
        clearInterval(this.scrollTimer)
        this.scrollTimer = null
      }
      if (this.refreshTimer) {
        clearInterval(this.refreshTimer)
        this.refreshTimer = null
      }
      this.isScrolling = false
      this.isRefreshing = false
      this.drawECG()
    },
    
    updateDisplayData() {
      const nowIndex = this.refreshList.length
      if (nowIndex === 0) return
      
      if (nowIndex < this.displayPoints) {
        this.showIndex = nowIndex - 1
      } else {
        this.showIndex = (nowIndex - 1) % this.displayPoints
      }
      
      for (let i = 0; i < this.displayPoints; i++) {
        if (i >= this.refreshList.length) break
        
        if (nowIndex <= this.displayPoints) {
          this.displayData[i] = this.refreshList[i]
        } else {
          const times = Math.floor((nowIndex - 1) / this.displayPoints)
          const temp = times * this.displayPoints + i
          if (temp < nowIndex) {
            this.displayData[i] = this.refreshList[temp]
          }
        }
      }
    },
    
    drawECG() {
      if (!this.ctx) return
      
      const width = this.canvasWidth
      const height = this.canvasHeight
      
      // 清空画布
      this.ctx.clearRect(0, 0, width, height)
      
      // 绘制背景
      this.ctx.setFillStyle('#FFFFFF')
      this.ctx.fillRect(0, 0, width, height)
      
      // 绘制网格
      this.drawGrid()
      
      // 绘制心电图
      if (this.isScrolling) {
        this.drawScrollECG()
      } else if (this.isRefreshing) {
        this.drawRefreshECG()
      } else {
        this.drawStaticECG()
      }
      
      // 绘制标题
      this.ctx.setFillStyle('#000000')
      this.ctx.setFontSize(14)
      this.ctx.fillText(this.currentModeText, 10, 20)
      
      this.ctx.draw()
    },
    
    drawGrid() {
      const width = this.canvasWidth
      const height = this.canvasHeight
      
      this.ctx.setStrokeStyle('#DCDCDC')
      this.ctx.setLineWidth(1)
      
      // 绘制垂直线
      for (let x = 0; x < width; x += 10) {
        this.ctx.beginPath()
        this.ctx.moveTo(x, 0)
        this.ctx.lineTo(x, height)
        this.ctx.stroke()
      }
      
      // 绘制水平线
      for (let y = 0; y < height; y += 10) {
        this.ctx.beginPath()
        this.ctx.moveTo(0, y)
        this.ctx.lineTo(width, y)
        this.ctx.stroke()
      }
      
      // 绘制中心线
      this.ctx.setStrokeStyle('#FF0000')
      this.ctx.setLineWidth(2)
      this.ctx.beginPath()
      this.ctx.moveTo(0, height / 2)
      this.ctx.lineTo(width, height / 2)
      this.ctx.stroke()
    },
    
    drawScrollECG() {
      if (this.dataList.length === 0) return
      
      const width = this.canvasWidth
      const height = this.canvasHeight
      
      this.ctx.setStrokeStyle('#31CE32')
      this.ctx.setLineWidth(2)
      
      const startIndex = Math.max(0, this.scrollIndex - this.displayPoints)
      const endIndex = Math.min(this.scrollIndex, this.dataList.length)
      
      if (startIndex >= endIndex) return
      
      const xStep = width / this.displayPoints
      const centerY = height / 2
      
      this.ctx.beginPath()
      
      for (let i = startIndex; i < endIndex; i++) {
        const x = (i - startIndex) * xStep
        const value = this.dataList[i]
        const y = centerY - (value * 1.5)
        
        if (i === startIndex) {
          this.ctx.moveTo(x, y)
        } else {
          this.ctx.lineTo(x, y)
        }
      }
      
      this.ctx.stroke()
    },
    
    drawRefreshECG() {
      if (this.displayData.length === 0) return
      
      const width = this.canvasWidth
      const height = this.canvasHeight
      
      this.ctx.setStrokeStyle('#31CE32')
      this.ctx.setLineWidth(2)
      
      const xStep = width / this.displayPoints
      const centerY = height / 2
      
      this.ctx.beginPath()
      
      for (let i = 0; i < this.displayPoints && i < this.displayData.length; i++) {
        const x = i * xStep
        const y = centerY - (this.displayData[i] * 1.5)
        
        if (i === 0) {
          this.ctx.moveTo(x, y)
        } else {
          this.ctx.lineTo(x, y)
        }
      }
      
      this.ctx.stroke()
      
      // 绘制当前刷新位置指示器
      if (this.showIndex >= 0 && this.showIndex < this.displayPoints) {
        this.ctx.setFillStyle('#FF0000')
        const x = this.showIndex * xStep
        this.ctx.beginPath()
        this.ctx.arc(x, centerY, 3, 0, 2 * Math.PI)
        this.ctx.fill()
      }
    },
    
    drawStaticECG() {
      if (this.dataList.length === 0) return
      
      const width = this.canvasWidth
      const height = this.canvasHeight
      
      this.ctx.setStrokeStyle('#31CE32')
      this.ctx.setLineWidth(2)
      
      const displaySize = Math.min(this.displayPoints, this.dataList.length)
      const xStep = width / displaySize
      const centerY = height / 2
      
      this.ctx.beginPath()
      
      for (let i = 0; i < displaySize; i++) {
        const x = i * xStep
        const value = this.dataList[i]
        const y = centerY - (value * 1.5)
        
        if (i === 0) {
          this.ctx.moveTo(x, y)
        } else {
          this.ctx.lineTo(x, y)
        }
      }
      
      this.ctx.stroke()
    }
  }
}
</script>

<style scoped>
.ecg-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.ecg-header {
  margin-bottom: 20rpx;
}

.ecg-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.ecg-canvas-container {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
  margin-bottom: 30rpx;
}

.ecg-canvas {
  width: 100%;
  height: 400rpx;
  border: 1rpx solid #e0e0e0;
}

.ecg-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  max-width: 600rpx;
}

.control-btn {
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  border: none;
  border-radius: 10rpx;
  background-color: #007AFF;
  color: #fff;
  margin: 0 10rpx;
}

.control-btn:active {
  background-color: #0056b3;
}

.control-btn[disabled] {
  background-color: #ccc;
  color: #999;
}

.stop-btn {
  background-color: #ff3b30;
}

.stop-btn:active {
  background-color: #d9342a;
}
</style>